<div class="panel panel-default">
	<div class="panel-heading">Create a API Url</div>
	<div class="panel-body">
		<div class="form-group">
			<label for="name">API Name</label>
			<input type="text" class="form-control" ng-model="newName" id="name">
		</div>

		<div class="form-group">
			<label for="url">Url</label>
			<input type="text" class="form-control" ng-model="newUrl" id="url">
		</div>

		<div class="form-group">
			<label for="method">Method</label>
			<select class="form-control" ng-model="newMethod" id="method">
                <option value="*" selected="selected">*</option>
                <option value="GET">GET</option>
                <option value="PUT">PUT</option>
                <option value="POST">POST</option>
                <option value="DELETE">DELETE</option>
            </select>
		</div>

		<div class="form-group">
			<label for="status">Status</label>
			<select class="form-control" ng-model="newStatus" id="status">
                <option value="0" selected="selected">Down</option>
                <option value="1">UP</option>
            </select>
		</div>

		<div class="form-group">
			<label for="desc">Desc</label>
			<textarea class="form-control" ng-model="newDesc" id="desc" rows="4"></textarea>
		</div>

		<div class="form-group">
			<label for="accessControl">AccessControl</label>
			<textarea json-text class="form-control" ng-model="newAccessControl" id="accessControl" rows="15"></textarea>
		</div>

		<div class="form-group">
			<label for="mock">Mock</label>
			<textarea json-text class="form-control" ng-model="newMock" id="mock" rows="15"></textarea>
		</div>
	</div>
</div>


<div class="panel panel-default">
	<div class="panel-heading">API dispatch nodes</div>
	<div class="panel-body">
		<form class="form-inline">
			<div class="form-group">
				<label for="clusterName">Cluster</label>
				<select class="form-control" ng-model="newClusterName" id="clusterName">
                    <option ng-repeat="c in clusters" value="{{c.name}}">{{c.name}}</option>
                </select>
			</div>
			<div class="form-group">
				<label for="nodeAttrName">AttrName</label>
				<input type="text" size="10" class="form-control" ng-model="newNodeAttrName" id="nodeAttrName" />
			</div>
			<div class="form-group">
				<label for="nodeRewrite">Rewrite</label>
				<input type="text" class="form-control" ng-model="newNodeRewrite" id="nodeRewrite" />
			</div>
			<div class="form-group">
				<label for="validation">Validation</label>
				<textarea json-text class="form-control" ng-model="newValidation" id="validation" rows="15"></textarea>
			</div>
			<button type="button" class="btn btn-default" ng-click="addNode()">Add</button>
		</form>
	</div>
</div>

<table class="table table-bordered table-striped">
	<thead>
		<tr>
			<th>Cluster</th>
			<th>AttrName</th>
			<th>Rewrite</th>
			<th>Validation</th>
			<th>Opts</th>
		</tr>
	</thead>

	<tbody>
		<tr ng-repeat="n in newNodes">
			<td>
				<a href="#/clusters/{{n.clusterName}}">{{n.clusterName}}</a>
			</td>
			<td>
				<input type="text" size="10" ng-model="n.attrName" />
			</td>
			<td>
				<input type="text" size="10" ng-model="n.rewrite" />
			</td>
			<td>
				<textarea json-text class="form-control" ng-model="n.validations" rows="15"></textarea>
			</td>
			<td>
				<button type="button" class="btn btn-default" ng-click="delete(n)">Delete</button>
			</td>
		</tr>
	</tbody>
</table>

<button type="button" class="btn btn-default" ng-click="add()">Submit</button>